<script setup>
import { ref, onMounted } from 'vue'
import { getDepartment, getReglist } from '@/apis/apis.js'
const level1Data = ref([])
const level2Data = ref([])
const level1ActiveIndex = ref(-1)
const handleChangeLevel1 = async (item, index) => {
  level1ActiveIndex.value = index
  const res = await getReglist({
    id: item._id
  })
  console.log(res.data[0].dep_ment_list)
  level2Data.value = res.data[0].dep_ment_list
}
const handleToDoctorView = (item) => {
  console.log(item)
  uni.navigateTo({ url: `/pages/doctor/doctor?id=${item.dep_id}` })
}
onMounted(async () => {
  const res = await getDepartment()
  console.log(res)
  level1Data.value = res.data
})
</script>

<template>
  <view class="view">
    <scroll-view class="view-level1-scroll" scroll-y enable-flex>
      <view class="view-level1-item" @click="handleChangeLevel1(item, index)" :class="{ active: level1ActiveIndex === index }" v-for="(item, index) in level1Data" :key="index">{{ item.dep_ment }}</view>
    </scroll-view>
    <scroll-view class="view-level2-scroll" scroll-y enable-flex>
      <view class="view-level2-item" v-for="(item, index) in level2Data" :key="index" @click="handleToDoctorView(item)">{{ item.dep_name }}</view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.view {
  display: flex;
  .view-level1-scroll {
    height: 100vh;
    width: 200rpx;
    .view-level1-item {
      padding: 20rpx;
      background-color: #f8f8f8;
      &.active {
        background-color: #fff;
        color: #4b61a4;
      }
    }
  }
  .view-level2-scroll {
    flex: 1;
    height: 100vh;
    .view-level2-item {
      padding: 20rpx;
    }
  }
}
</style>
